<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>发表文章</title>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="icon" type="image/png"
	href="${ctxPath}/assets/i/app-icon72x72@2x.png">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="72x72"
	href="${ctxPath}/assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="YeZi Guo" />
<link rel="apple-touch-icon-precomposed"
	href="${ctxPath}/assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileImage"
	content="${ctxPath}/assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileColor" content="#0e90d2">
<link rel="stylesheet" href="${ctxPath}/assets/css/amazeui.min.css">
<link rel="stylesheet" href="${ctxPath}/assets/css/app.css">
<style type="text/css">
#pageView {
	color: red;
	font-size: 0.8em;
	font-weight: bold;
}

.font {
	font-size: 1em;
}

#user {
	color: gray;
	font-size: 0.9em;
}

.username {
	color: red;
}

#farme {
	margin-left: 20%;
	margin-right: 20%;
}

#btn {
	margin-left: 40%;
}

#ue {
	width: 50em;
}
</style>
</head>

<body id="blog">

	<header class="am-g am-g-fixed blog-fixed blog-text-center blog-header">
		<div class="farme am-u-sm-8 am-u-sm-centered">
			<img width="200" src="${ctxPath}/assets/i/YeZiGuo.png"
				alt="Amaze UI Logo" />
			<h2 class="am-hide-sm-only">随便写!</h2>
		</div>
	</header>
	<hr>
	<!-- nav start -->
	<nav class="am-g am-g-fixed blog-fixed blog-nav">
		<button
			class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only blog-button"
			data-am-collapse="{target: '#blog-collapse'}">
			<span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span>
		</button>

		<div class="farme am-collapse am-topbar-collapse" id="blog-collapse">
			<ul class="am-nav am-nav-pills am-topbar-nav">
				<li ><a href="${ctxPath}/index">首页</a></li>
				<li class="am-dropdown" data-am-dropdown><a
					class="am-dropdown-toggle" data-am-dropdown-toggle
					href="javascript:;"> 布局 <span class="am-icon-caret-down"></span>
				</a>
					<ul class="am-dropdown-content">
						<li><a href="${ctxPath}/index">1. 默认</a></li>
						<li><a href="${ctxPath}/index-nosidebar">2. 电脑版</a></li>
						<li><a href="${ctxPath}/index-noslider">3. 手机版</a></li>
					</ul></li>
				<li><a href="#">新功能正在搭建...</a></li>


				<li><% var user = session.user; if(user!=null){ %></li>
				<li><a href="#">我的图片库</a></li>
				<li class="am-dropdown" data-am-dropdown><a
					class="am-dropdown-toggle" data-am-dropdown-toggle
					href="javascript:;"> 个人中心 <span class="am-icon-caret-down"></span>
				</a>
					<ul class="am-dropdown-content">
						<li><a href="${ctxPath}/article/list">我发表的文章</a></li>
						<li class="am-active"><a href="${ctxPath}/article/save">发表新文章</a></li>
						<li><a href="#">修改密码</a></li>
						<li><a href="#">注销</a></li>
					</ul></li>
				<li><a id="user">欢迎您: <span class="username">${user.username}</span>
						<% } %>
				</a></li>


			</ul>
			<form class="am-topbar-form am-topbar-right am-form-inline"
				role="search">
				<div class="farme am-form-group">
					<input type="text" class="am-form-field am-input-sm"
						placeholder="搜索">
				</div>
			</form>
		</div>
	</nav>
	<hr>
	<!-- nav end -->
	<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->


	<div class="farme am-cf admin-main" id="farme">
		<!-- sidebar start -->

		<!-- content start -->
		<div class="farme admin-content">
			<div class="farme admin-content-body">
				<div class="farme am-cf am-padding am-padding-bottom-0">
					<div class="farme am-fl am-cf">
						<strong class="am-text-primary am-text-lg">发表</strong> / <small>文章</small>
					</div>
				</div>

				<hr>

				<form class="am-form" id="doc-vld-msg" method="post">
					<fieldset>
						<div class="am-form-group">
							<label for="doc-vld-name-2-1">标题：</label> <input type="text"
								id="doc-vld-name-2-1" minlength="5" name="title"
								placeholder="输入标题（至少 5 个字符）*必填 " required />
						</div>

						<div class="am-form-group">
							<label for="doc-vld-name-2-1">作者： <%
								if(session.user!=null){ %> <span class="username">${user.username}</span>
								<% } %>
							</label>
						</div>

						<div class="am-form-group">
							<label for="doc-vld-name-2-1">文章所属类型：</label>
							 <select data-am-selected="{searchBox: 1}" name="typeId"> <%
								for(var type in typeList){ %>
								<option value="${type.id}">${type.name}</option> <% } %>
							</select>
						</div>

						<div class="am-form-group">
							<label for="doc-vld-name-2-1">作者概述：</label> <input type="text"
								id="doc-vld-name-2-1" name="info" placeholder="不填写则默认截取文章前50字段 " />
						</div>

						<div class="am-form-group">
							<label for="doc-vld-name-2-1">文章内容：</label><br />
							<div class="farme am-u-sm-12 am-u-md-10" id="ue">
								<script id="container" name="text" type="text/plain">

   							 	</script>
							</div>
						</div>

					</fieldset>
					<div class="farme am-margin" id="btn">
						<button id="btnSave" type="button"
							class="am-btn am-btn-primary am-btn-xs">发表文章</button>
						<button type="reset" class="am-btn am-btn-primary am-btn-xs">清空内容</button>
					</div>
				</form>




			</div>

		</div>
		<!-- content end -->
	</div>


	<footer class="blog-footer">
		<div class="farme blog-text-center">© 2017 YeZi Guo Blog</div>
	</footer>

	<!--[if (gte IE 9)|!(IE)]><!-->
	<script src="${ctxPath}/assets/js/jquery.min.js"></script>
	<!--<![endif]-->
	<!--[if lte IE 8 ]>
	<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
	<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
	<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
	<![endif]-->
	<script src="${ctxPath}/assets/js/amazeui.min.js"></script>
	<script src="${ctxPath}/assets/js/jquery.form.min.js"></script>
	
	<script src="${ctxPath}/assets-admin/js/amazeui.min.js"></script>
    <script src="${ctxPath}/assets-admin/js/amazeui.datatables.min.js"></script>
    <script src="${ctxPath}/assets-admin/js/dataTables.responsive.min.js"></script>
    <script src="${ctxPath}/assets-admin/js/app.js"></script>
	

	<!-- 配置文件 -->
	<script type="text/javascript"
		src="${ctxPath}/assets/ueditor/ueditor.config.js"></script>
	<!-- 编辑器源码文件 -->
	<script type="text/javascript"
		src="${ctxPath}/assets/ueditor/ueditor.all.js"></script>
	<!-- 实例化编辑器 -->
	<script type="text/javascript">
		var ue = UE.getEditor('container');
	</script>

	<script type="text/javascript">
		$(function() {
			$('#doc-vld-msg')
					.validator(
							{
								onValid : function(validity) {
									$(validity.field).closest('.am-form-group')
											.find('.am-alert').hide();
								},

								onInValid : function(validity) {
									var $field = $(validity.field);
									var $group = $field
											.closest('.am-form-group');
									var $alert = $group.find('.am-alert');
									// 使用自定义的提示信息 或 插件内置的提示信息
									var msg = $field.data('validationMessage')
											|| this
													.getValidationMessage(validity);

									if (!$alert.length) {
										$alert = $(
												'<div class="am-alert am-alert-danger"></div>')
												.hide().appendTo($group);
									}

									$alert.html(msg).show();
								}
							});

			// 异步提交表单
			$("#btnSave").click(function() {
				//Jquery禁用登录按钮
				var $btn = $(this);
				$btn.addClass("am-disabled");

				var isFormValid = $('#doc-vld-msg').validator('isFormValid');
				if (!isFormValid){
					$btn.removeClass("am-disabled");
					return;
				}
				$(".am-form").ajaxSubmit({
					success : function(data) {
						$btn.removeClass("am-disabled");
						if (data.errorCode != "0") {
							alert(data.errorMsg);
							return;
						}
						//跳转页面
						window.location.href = "${ctxPath}/article/save";
					}
				})
			})

		});
	</script>

</body>
</html>
